<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="200">
			<u-form-item label="姓名" prop="name" required>
				<u-input v-model="form.name" placeholder="请输入姓名" />
			</u-form-item>
			
			<u-form-item label="身份证号码" prop="id_card" required>
				<u-input v-model="form.id_card" placeholder="请输入18位身份证号码" />
			</u-form-item>
			
			<u-form-item label="性别" prop="gender" required>
				<u-radio-group v-model="form.gender">
					<u-radio name="男">男</u-radio>
					<u-radio name="女">女</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="户籍所在地" prop="household_location" required>
				<u-input v-model="form.household_location" placeholder="请输入户籍所在地" />
			</u-form-item>
			
			<u-form-item label="联系电话" prop="phone" required>
				<u-input v-model="form.phone" placeholder="请输入联系电话" />
			</u-form-item>
			
			<u-form-item label="婚姻状况" prop="marital_status" required>
				<u-radio-group v-model="form.marital_status">
					<u-radio name="未婚">未婚</u-radio>
					<u-radio name="已婚">已婚</u-radio>
					<u-radio name="离异">离异</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="学历" prop="education" required>
				<u-input 
					v-model="form.education" 
					placeholder="请选择学历" 
					readonly
					@click="showEducationSelect = true"
				/>
			</u-form-item>
			
			<u-form-item label="参加工作时间" prop="work_start_date" required>
				<u-input 
					v-model="form.work_start_date" 
					placeholder="请选择参加工作时间" 
					readonly
					@click="showWorkStartCalendar = true"
				/>
			</u-form-item>
			
			<u-form-item label="共同申领人" prop="co_applicant">
				<u-input v-model="form.co_applicant" placeholder="请输入共同申领人姓名" />
			</u-form-item>
			
			<u-form-item label="关系" prop="relationship">
				<u-input v-model="form.relationship" placeholder="请输入与共同申领人的关系" />
			</u-form-item>
			
			<u-form-item label="工作单位" prop="work_unit" required>
				<u-input v-model="form.work_unit" placeholder="请输入工作单位" />
			</u-form-item>
		</u-form>
		
		<!-- 参加工作时间日历 -->
		<u-calendar 
			v-model="showWorkStartCalendar" 
			mode="date" 
			@change="onWorkStartDateChange"
		></u-calendar>
		
		<!-- 学历选择器 -->
		<u-select 
			v-model="showEducationSelect" 
			mode="single-column" 
			:list="educationList" 
			@confirm="onEducationConfirm"
		></u-select>
		
		<!-- 底部固定提交按钮 -->
		<view class="submit-section">
			<u-button type="primary" @click="submitForm" :loading="submitting">提交申请</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				id_card: '',
				gender: '',
				household_location: '',
				phone: '',
				marital_status: '',
				education: '',
				work_start_date: '',
				co_applicant: '',
				relationship: '',
				work_unit: ''
			},
			rules: {
				name: [{
					required: true,
					message: '请输入姓名',
					trigger: ['blur', 'change']
				}],
				id_card: [{
					required: true,
					message: '请输入身份证号码',
					trigger: ['blur', 'change']
				}],
				gender: [{
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				}],
				household_location: [{
					required: true,
					message: '请输入户籍所在地',
					trigger: ['blur', 'change']
				}],
				phone: [{
					required: true,
					message: '请输入联系电话',
					trigger: ['blur', 'change']
				}],
				marital_status: [{
					required: true,
					message: '请选择婚姻状况',
					trigger: ['blur', 'change']
				}],
				education: [{
					required: true,
					message: '请选择学历',
					trigger: ['blur', 'change']
				}],
				work_start_date: [{
					required: true,
					message: '请选择参加工作时间',
					trigger: ['blur', 'change']
				}],
				co_applicant: [{
					required: true,
					message: '请输入共同申领人',
					trigger: ['blur', 'change']
				}],
				relationship: [{
					required: true,
					message: '请输入关系',
					trigger: ['blur', 'change']
				}],
				work_unit: [{
					required: true,
					message: '请输入工作单位',
					trigger: ['blur', 'change']
				}]
			},
			showWorkStartCalendar: false,
			showEducationSelect: false,
			educationList: [
				{ label: '高中', value: '高中' },
				{ label: '中专', value: '中专' },
				{ label: '大专', value: '大专' },
				{ label: '本科', value: '本科' },
				{ label: '硕士', value: '硕士' },
				{ label: '博士', value: '博士' }
			],
			submitting: false
		}
	},
	methods: {
		async submitForm() {
			// 校验
			const valid = await this.$refs.uForm.validate();
			if (!valid) {
				return;
			}

			// 提交
			await this.$api.settlementSubsidyCreate(this.form);
			
			uni.showToast({
				title: '提交成功',
				icon: 'success'
			});
			
			// 重置表单
			this.$refs.uForm.resetFields();

			// 延迟返回上一页
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} 
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	padding-bottom: 120rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.submit-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 999;
}
</style>
